{% extends 'mpa/common/base.html' %}

{% block content %}
        <div class="wrapper">
            <div class="container">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings <span class="m-l-5"><i class="fa fa-cog"></i></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <h4 class="page-title">Inbox </h4>
                    </div>
                </div>


                <div class="row">

                    <!-- Left sidebar -->
                    <div class="col-lg-3 col-md-4">
                        <a href="email-compose.html" class="btn btn-danger waves-effect waves-light btn-block">Compose</a>
                        <div class="panel panel-default p-0 m-t-20">
                            <div class="panel-body p-0">
                                <div class="list-group mail-list">
                                  <a href="#" class="list-group-item no-border active"><i class="fa fa-download m-r-5"></i>Inbox <b>(8)</b></a>
                                  <a href="#" class="list-group-item no-border"><i class="fa fa-star-o m-r-5"></i>Starred</a>
                                  <a href="#" class="list-group-item no-border"><i class="fa fa-file-text-o m-r-5"></i>Draft <b>(20)</b></a>
                                  <a href="#" class="list-group-item no-border"><i class="fa fa-paper-plane-o m-r-5"></i>Sent Mail</a>
                                  <a href="#" class="list-group-item no-border"><i class="fa fa-trash-o m-r-5"></i>Trash <b>(354)</b></a>
                                </div>
                            </div>
                        </div>
                        <h3 class="panel-title m-t-40">Labels</h3>
                        <div class="panel panel-default p-0 p-t-20 m-t-20">
                            <div class="panel-body p-0">
                                <div class="list-group no-border">
                                  <a href="#" class="list-group-item no-border"><span class="fa fa-circle text-info pull-right"></span>Web App</a>
                                  <a href="#" class="list-group-item no-border"><span class="fa fa-circle text-warning pull-right"></span>Project 1</a>
                                  <a href="#" class="list-group-item no-border"><span class="fa fa-circle text-purple pull-right"></span>Project 2</a>
                                  <a href="#" class="list-group-item no-border"><span class="fa fa-circle text-pink pull-right"></span>Friends</a>
                                  <a href="#" class="list-group-item no-border"><span class="fa fa-circle text-success pull-right"></span>Family</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Left sidebar -->

                    <!-- Right Sidebar -->
                    <div class="col-lg-9 col-md-8">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="btn-toolbar" role="toolbar">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary waves-effect waves-light"><i class="fa fa-inbox"></i></button>
                                        <button type="button" class="btn btn-primary waves-effect waves-light"><i class="fa fa-exclamation-circle"></i></button>
                                        <button type="button" class="btn btn-primary waves-effect waves-light"><i class="fa fa-trash-o"></i></button>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-folder"></i>
                                        <b class="caret"></b>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#fakelink">Action</a></li>
                                            <li><a href="#fakelink">Another action</a></li>
                                            <li><a href="#fakelink">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#fakelink">Separated link</a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-tag"></i>
                                        <b class="caret"></b>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#fakelink">Action</a></li>
                                            <li><a href="#fakelink">Another action</a></li>
                                            <li><a href="#fakelink">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#fakelink">Separated link</a></li>
                                        </ul>
                                    </div>

                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary waves-effect waves-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                          More
                                          <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                          <li><a href="#fakelink">Dropdown link</a></li>
                                          <li><a href="#fakelink">Dropdown link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div> <!-- End row -->

                        <div class="panel panel-default m-t-20">
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-hover mails">
                                        <tbody>
                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox1" type="checkbox" checked="checked">
                                                        <label for="checkbox1">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    07:23 AM
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox2" type="checkbox" checked="checked">
                                                        <label for="checkbox2">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">John Deo</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-success m-r-15"></i>Hi Bro, How are you?</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    07:03 AM
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox3" type="checkbox">
                                                        <label for="checkbox3">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Manager</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-purple m-r-15"></i>Dolor sit amet, consectetuer adipiscing</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    03:00 AM
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox4" type="checkbox" checked="checked">
                                                        <label for="checkbox4">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Manager</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-warning m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    22 Feb
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox5" type="checkbox">
                                                        <label for="checkbox5">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Facebook</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    22 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox6" type="checkbox" checked="checked">
                                                        <label for="checkbox6">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    21 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox7" type="checkbox">
                                                        <label for="checkbox7">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Twitter Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    21 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox-7" type="checkbox">
                                                        <label for="checkbox-7">

                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Jonaly Smith</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-pink m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    19 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox8" type="checkbox">
                                                        <label for="checkbox8">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    19 Feb
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox9" type="checkbox" checked="checked">
                                                        <label for="checkbox9">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    19 Feb
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox10" type="checkbox">
                                                        <label for="checkbox10">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">John Deo</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-success m-r-15"></i>Hi Bro, How are you?</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    18 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox11" type="checkbox" checked="checked">
                                                        <label for="checkbox11">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Manager</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-purple m-r-15"></i>Dolor sit amet, consectetuer adipiscing</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    18 Feb
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox12" type="checkbox">
                                                        <label for="checkbox12">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Manager</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-warning m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    15 Feb
                                                </td>
                                            </tr>

                                            <tr>
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox13" type="checkbox" checked="checked">
                                                        <label for="checkbox13">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Facebook</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    15 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox14" type="checkbox">
                                                        <label for="checkbox14">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star text-warning"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>

                                                </td>
                                                <td class="text-right">
                                                    14 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox15" type="checkbox" checked="checked">
                                                        <label for="checkbox15">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Twitter Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-info m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    12 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox16" type="checkbox">
                                                        <label for="checkbox16">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Jonaly Smith</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read"><i class="fa fa-circle text-pink m-r-15"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    12 Feb
                                                </td>
                                            </tr>

                                            <tr class="active">
                                                <td class="mail-select">
                                                    <div class="checkbox checkbox-primary">
                                                        <input id="checkbox17" type="checkbox">
                                                        <label for="checkbox17">
                                                        </label>
                                                    </div>
                                                </td>
                                                <td class="mail-rateing">
                                                    <i class="fa fa-star"></i>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Google Inc</a>
                                                </td>
                                                <td>
                                                    <a href="/mpa/demos/mail/email-read">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a>
                                                </td>
                                                <td>
                                                    <i class="fa fa-paperclip"></i>
                                                </td>
                                                <td class="text-right">
                                                    10 Feb
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>

                                <hr>

                                <div class="row">
                                    <div class="col-xs-7">
                                        Showing 1 - 20 of 289
                                    </div>
                                    <div class="col-xs-5">
                                        <div class="btn-group pull-right">
                                          <button type="button" class="btn btn-default waves-effect"><i class="fa fa-chevron-left"></i></button>
                                          <button type="button" class="btn btn-default waves-effect"><i class="fa fa-chevron-right"></i></button>
                                        </div>
                                    </div>
                                </div>

                            </div> <!-- panel body -->
                        </div> <!-- panel -->
                    </div> <!-- end Col-9 -->

                </div><!-- End row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end wrapper -->
{% endblock %}